<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background: url('../img/bg7.jpg') no-repeat 0 0/cover;
        }

        .container {
            background: linear-gradient(rgba(162, 216, 255, 0.8), rgba(1, 110, 157, 0.8));
            border-radius: 10px;
            width: 600px;
            height: 400px;
            /* margin-top: 200px; */
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            color: orangered;
        }

        .title-p {
            width: 100%;
            text-align: center;
            font-size: 20px;
            font-weight: 550;
        }

        .register-box {
            margin-top: 50px;
        }

        .tips {
            margin-left: 10px;
            color: red;
        }

        .form-group {
            margin-bottom: 15px;
            margin-left: 5%;
        }

        .control-label {
            display: inline-block;
            max-width: 100%;
            margin-bottom: 5px;
            font-weight: 700;
        }

        .form-control {
            display: block;
            width: 90%;
            height: 34px;
            /* padding: 6px 12px; */
            font-size: 14px;
            line-height: 1.42857143;
            color: #555;
            background-color: #fff;
            background-image: none;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        .modal-footer {
            width: 100%;
        }

        .modal-footer a {
            color: rgb(47, 255, 47);
            font-weight: bold;
        }

        .modal-footer>.gologin {
            float: right;
        }

        .btn {
            color: orangered;
            background-color: aqua;
            border: none;
            /* border-color: rgb(9, 117, 117); */
            margin-right: 30px;
            height: 40px;
            float: left;
            margin-left: 200px;
            width: 200px;
            border-radius: 6px;
            font-size: 20px;
            cursor: pointer;
        }

        .btn:hover {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            margin-left: 270px;
            margin-top: -30px;
            transition: all 0.3s;
            background-color: orangered;
            color: aqua;
            font-weight: bold;
            /* opacity: 0.5; */
            /* border-color: rgb(152, 50, 13); */
        }

        a {
            /* text-decoration: none; */
            margin-right: 10px;
        }
    </style>
</head>

<body>
    <div class="container">
        <form class="register-box">
            <p class="title-p">用户登录</p>
            <div class="form-group">
                <label for="recipient-name" class="control-label">用户名:</label>
                <input type="text" class="form-control" id="recipient-username">
            </div>
            <div class="form-group">
                <label for="recipient-name" class="control-label">密码:</label>
                <input type="password" class="form-control" id="recipient-password">
            </div>
            <div class="form-group">
                <input type="checkbox"><span class="tips">记住密码?</span>
            </div>
        </form>
        <div class="modal-footer">
            <span class="gologin"><a href="register.html">免费注册</a></span>
            <button type="button" class="btn btn-primary">登陆</button>
        </div>
    </div>

    <script src="../js/tool.js"></script>
    <script>
        class Login {
            constructor() {
                this.username = document.querySelector('.form-group>input[type=text]');
                this.password = document.querySelector('.form-group>input[type=password]');
                this.checkbox = document.querySelector('.form-group>input[type=checkbox]');
                this.btn = document.querySelector('.btn');
                this.rules = [
                    {
                        name: this.username,
                        rule: /^.{6,}$/i,
                        message: '用户名格式错误'
                    },
                    {
                        name: this.password,
                        rule: /^.{6,}$/,
                        message: '密码错误'
                    },
                ];

                this.init();
            }
            init() {
                this.handleTest();
                this.initValue();
                this.handleLogin();
            }

            // 正则格式验证
            handleTest() {
                let that = this
                this.rules.forEach(function (it) {
                    // console.log(this);
                    it.name.onblur = () => {
                        // console.log(that);
                        that.handlecheck(it.name, it.rule, it.message)
                    }
                })
            }

            // 封装验证的方法 
            handlecheck(ele, reg, message) {
                // 在每一次验证之前都清除提示 
                ele.nextElementSibling ? ele.nextElementSibling.remove() : ''

                // 正则验证    
                let res = reg.test(ele.value)
                if (!res) {
                    // 表示验证不通过 
                    var p = document.createElement('p')
                    p.innerHTML = message
                    p.className = 'tips'
                    ele.parentNode.appendChild(p)
                    return false
                }
                return true
            }

            //回显页面
            initValue() {
                //如果是记住密码的就会回显页面
                if (cookie.getItem('checkbox')) {
                    this.username.value = cookie.getItem('username');
                    this.password.value = cookie.getItem('password');
                    this.checkbox.checked = true;
                }
            }

            //是否保存账号密码
            handlePassword() {
                //用户如果勾选了记住密码的话进入
                if (this.checkbox.checked) {
                    //判断账户和密码是否都填写了
                    if (!this.username.value || !this.password.value) {
                        //只要有一个没有填写，就取消记住密码的勾选，并返回警告框提示
                        this.checkbox.checked = false
                        return alert('请填写完整的信息！')
                    }
                    //走到这里表示填写了
                    //就将用户名和密码还有checkbox的值存入cookie中
                    cookie.setItem('username', this.username.value, 6000)
                    cookie.setItem('password', this.password.value, 6000)
                    cookie.setItem('checkbox', true, 6000)
                } else {
                    //如果没有勾选记住密码的话，就删除cookie里面存储的值
                    cookie.removeItem('username');
                    cookie.removeItem('password');
                    cookie.removeItem('checkbox')
                }
            }

            handleLogin() {
                //绑定点击事件，因为要获取向后端请求后的数据，所以这里要用async 来声明一个异步函数，配合await来接收请求的数据
                this.btn.onclick = async () => {
                    //整理参数，参考接口文档！
                    let params = {
                        url: '/users/login',
                        query: {
                            username: this.username.value,
                            password: this.password.value
                        }
                    }

                    //定义一个变量来接收请求的数据
                    let res = await axios.post(params);
                    console.log(res);
                    //请求的状态码 == 1 表示请求成功
                    if (res.code == 1) {
                        //调用是否存储名字密码的函数
                        this.handlePassword();
                        //你登录成功后，后端会给你一个token,相当于一个门票，这里将它存入cookie，这样你登录的时候，后端才知道你登录了
                        cookie.setItem('token', res.token, 6000);
                        //将后端给的id存入cookie，这样后端就知道登录的是谁
                        cookie.setItem('userId', res.userId, 6000);
                        alert('登录成功!');
                        if (res.phone == '13838380438') {
                            location.href = './goodssyshome.html'
                        } else {
                            location.href = './home.html';
                        }

                    } else {
                        //输出后端返回的登录失败信息
                        alert(res.message);
                    }

                }
            }

        }
        let p = new Login();


    </script>
</body>

</html>